<template>
	<view v-if="cont.name" class="container" :style="theme">
		<view class="head">
			<image class="banner" :src="cont.poster" mode="widthFix"></image>
			<view class="head-cont">
				<view class="title"
					:class="cont.status==0||cont.status==2||cont.status==4||cont.status==5?'hui':cont.status==1?'on':cont.status==3?'blue':''">
					<text>{{cont.status == 0?'待发布':cont.status == 1?'报名中':cont.status == 2?'报名已截止':cont.status == 3?'进行中':cont.status == 4?'活动结束':'已取消'}}</text>{{cont.name}}
				</view>
				<view class="info">{{cont.theme}}</view>
				<view class="redColor f36">
					{{cont.price && Number(cont.price) >0?'￥' + cont.price :'免费' }}
				</view>
				<block v-if="shopHome == 1 && cont.venue">
					<view class="shopVenueDetail flex mt20" @click="tzVenDetail(cont.venue)" style="box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.12);">
						<image :src="cont.venue && cont.venue.logo?cont.venue.logo:imgHost+'/default_changguan.jpg'" class="venImg"></image>
						<view class="venDetail flex flex_between">
							<view class="venDetailLeft">
								<view class="f30 c2 fw5">
									{{cont.venue.venueName}}
								</view>
								<view class="f26 c9" style="margin-top: 2rpx;">
									{{cont.venue.address}}
								</view>
							</view>
							<u-icon name="arrow-right" color="#999999" size="32rpx"></u-icon>
						</view>
					</view>
				</block>
			</view>
		</view>
	
		<view class="card">
			<view class="bt">活动信息</view>
			<view class="label">
				<view class="label-left">主办方：</view>
				<view class="label-right">{{cont.sponsor}}</view>
			</view>
			<view class="label">
				<view class="label-left">承办方：</view>
				<view class="label-right">{{cont.organizer}}</view>
			</view>
			<view class="label">
				<view class="label-left">活动时间：</view>
				<view class="label-right">{{cont.activityTime}}</view>
			</view>
			<view class="label">
				<view class="label-left">报名截止：</view>
				<view class="label-right">{{cont.applyEndTime}}</view>
			</view>
			<view class="label">
				<view class="label-left">活动地点：</view>
				<view class="label-right">{{cont.siteName}}</view>
			</view>
		</view>
		<view class="card">
			<view class="bt">活动详情</view>
			<u-parse :content="cont.info"></u-parse>
		</view>
		<view class="bottomState flex-cb">
			<view class="f28 cDD5040 flex-cc" @click="jump('/pages/index/index','', 1)">
				<image :src="renovationInfo.navigationList && renovationInfo.navigationList.length > 0?renovationInfo.navigationList[0].iconSelected:imgHost+'/nav_home_sel.png'"></image>
				<view>首页</view>
			</view>
			<view class="flex-left">
				<!-- #ifdef MP -->
				<button  v-if="cont.status=='1' && !cont.payStatus" class='share' open-type="share">分享好友</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button  v-if="cont.status=='1' && !cont.payStatus" class='share' open-type="share" @click="shareBtn">分享好友</button>
				<!-- #endif -->
				<view v-if="cont.status=='1' && !cont.payStatus" class="registerNow" @click="jump('/pages/activity/signup?id=',id)">立即报名</view>
				<view v-if="cont.payStatus && cont.orderId" class="registerNow" @click="jump('/pages/order/detail?type=6&orderId=',cont.orderId)">查看订单</view>
			</view>
		</view>
		<u-popup :show="showPops" round custom-style="background: none" mode="top" overlayOpacity="0.7">
			<view class="fxpop popcnt flex-cc">
				<image :src="imgHost+'/ic_tip.png'" class="img1"></image>
				<image :src="imgHost+'/btn_tip.png'" class="img2" @click="showPops = false"></image>
			</view>
		</u-popup>
	</view>
</template>
<script>
	// #ifdef H5
	import wx from '@/common/jweixin.js';
	// #endif
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				showPops: false,
				cont: {}
			}
		},
		computed: mapState(["renovationInfo"]),
		onLoad(ops) {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			if(ops.venueId) {
				this.$store.commit('setVenueId', ops.venueId);
			}
			this.id = ops.id
			setTimeout(() => {
				this.getDetail()
			}, 500)
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			tzVenDetail(item) {
				this.$store.commit('setVenueName', item.venueName);
				this.$store.commit('setVenueId', item.venueId);
				this.jump3('/pages/venue/indexShop?id=', item.venueId)
			},
			// 发起获取signature请求
			getSignature() {
				var url = location.href.split('#')[0];
				this.$app.ajax({
					data: {
						param: {
							path: url
						}
					},
					api: this.$api.wxpConfig()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.setShare(res.record)
					}
				}).catch(() => {})
			},
			// 设置分享数据
			setShare(signature) {
				let that = this
				var url = location.href.split('?')[0]
				uni.setStorageSync('signature', JSON.stringify(signature))
			
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					// 配置微信 JSSDK
					appId: signature.appId, // 必填，公众号的唯一标识
					timestamp: signature.timestamp, // 必填，生成签名的时间戳
					nonceStr: signature.nonceStr, // 必填，生成签名的随机串
					signature: signature.signature, // 必填，签名
					jsApiList: ['scanQRCode', 'checkJsApi',	'chooseImage','updateAppMessageShareData', 'updateTimelineShareData']
				})
			
				wx.ready(function() {
					console.log('这是分享功能')
					wx.updateAppMessageShareData({
						imgUrl: that.cont.poster, // 分享图标
						title: that.cont.name, // 分享标题
						desc: that.cont.theme, // 分享描述
						link: url + "?id="+ that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							console.log('我来分享了')
						}
					})
					wx.updateTimelineShareData({
						imgUrl: that.cont.poster, // 分享图标
						title: that.cont.name, // 分享标题
						desc: that.cont.theme, // 分享描述
						link: url + "?id="+ that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							console.log('我来分享了')
						}
					})
				})
				wx.error((res) => {
					console.log(res)
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					// that.getSignature()
				})
			},
			//分享
			shareBtn(e) {
				if(e!=1) {
					this.showPops = true
				}
				const _signature = uni.getStorageSync('signature')
				// 先看看缓存里有没有
				if (_signature) {
					let signature = JSON.parse(_signature)
					// 获取当前时间戳
					var now = parseInt(new Date().getTime() / 1000) + ''
					// 计算两个时间戳之间的差值，单位为秒
					var diff = now - signature.expire_time
			
					// 判断差值是否大于2小时的秒数，即7200秒
					if (diff > 7200) {
						console.log('时间戳已经超过两小时。')
						this.getSignature()
					} else {
						console.log('时间戳未超过两小时。')
						this.setShare(signature)
					}
				} else {
					this.getSignature()
				}
			},
			activityShare() {
				this.$app.ajax({
					api: this.$api.activityShare(),
					data: {
						userId: this.userInfo.id,
						param: {
							activityId: this.id
						}
					},
				})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.activityInfoMini(),
					data: {
						userId: this.userInfo.id,
						param: {
							activityId: this.id
						}
					},
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.cont = res.record
						// this.shareBtn(1)
					} else {
						setTimeout(()=> {
							uni.navigateBack({
								delta:1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		},
		onShareAppMessage(e) {
			if (e.from == 'button') {
				this.activityShare()
				return {
					path: `/pages/activity/detail?id=${this.id}&venueId=${this.venueId}`,
				}
			} else {
				return {
					path: `/pages/activity/detail?id=${this.id}&venueId=${this.venueId}`,
				}
			}
			
		}

	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 80rpx;
	}

	.head {
		background-color: #ffff;
		margin-bottom: 24rpx;
	}

	.banner {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-items {
		height: 100%;
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.swiper-item image {
		width: 100%;
	}

	.head-cont {
		padding: 30rpx;
	}

	.head-cont .title {
		font-size: 34rpx;
		font-weight: 500;
		color: #222222;
		margin-bottom: 20rpx;
		line-height: 44rpx;
	}

	.head-cont .title text {
		height: 44rpx;
		background: $color;
		border-radius: 8rpx;
		display: inline-block;
		padding: 0 10rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #ffff;
	}

	// .head-cont .title.hui text {
	// 	background: #999999;
	// }

	.head-cont .title.blue text {
		background: rgba(0, 0, 0, 0.6);
	}
	// .head-cont .title.on text {
	// 	background: $phb;
	// }

	.info {
		font-size: 24rpx;
		font-weight: 400;
		color: #555555;
		margin-bottom: 20rpx;
		line-height: 36rpx;
	}

	.card {
		background-color: #ffff;
		padding: 30rpx;
		margin-bottom: 24rpx;
	}

	.card .bt {
		color: #222222;
		line-height: 1.5;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 30rpx;
	}


	.coach-right .ks text {
		color: #222222;
		display: inline;
		margin: 0 10rpx;
	}

	.label {
		display: flex;
		margin-top: 20rpx;
		line-height: 1.5;
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.label-left {
		color: #666666;
		display: inline-block;
		width: 5em;
	}

	.label-right {
		flex: 1;
	}

	.bmry {
		display: flex;
		flex-wrap: wrap;
	}

	.peopleList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.headPortrait {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.bottomState .flex-cc {
		width: 100rpx;
		flex-direction: column;
	}

	.bottomState .flex-cc image {
		width: 44rpx;
		height: 44rpx;
	}

	.share {
		height: 68rpx;
		padding: 0 34rpx;
		color: $color;
		border: 1px solid $color;
		background-color: #fff;
		font-size: 28rpx;
		border-radius: 36rpx;
		background-color: #fff;
		line-height: 68rpx;
	}

	.registerNow {
		height: 68rpx;
		padding: 0 34rpx;
		color: #fff;
		background-color: $color;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
		margin-left: 20rpx;
	}

	.cancel {
		height: 68rpx;
		padding: 0 34rpx;
		color: #666666;
		border: 1px solid #999999;
		font-size: 28rpx;
		border-radius: 36rpx;
		line-height: 68rpx;
	}

	.registeredEndColor {
		background: $phb;
	}

	.underwayColor {
		background: $blueBg;
	}

	.finishedColor {
		background: #CCCCCC;
	}
</style>
